<template>
  <view class="trends">
    <view style="height:24rpx;">
    </view>
    <view :style="'height:'+statusBarHeight+'px;'">
    </view>
    <view class="searchBox">
      <image class="navLeftIcon" src="/static/images/nav-left.png" mode="" @click.stop="goback()"></image>
      <u-search style="width: 100%;" maxlength="45" placeholder="请输入搜索内容" :action-style="actionStyle" search-icon="/static/images/search.png" v-model="query.search" @clear="onSearch('clear')" action-text="搜索" @custom="onSearch('search')"></u-search>
    </view>

    <view class="instrumentTabs" v-if="true">
      <u-tabs v-if="showThat" :list="list" item-width="172rpx" bar-width="18" :bar-style="{'background-color':'#FF2544'}" bar-height="6" active-color="#333333" inactive-color="#999999" :is-scroll="false" :current="current" @change="change"></u-tabs>
    </view>
    <view class="content-box">
      <view style="height: 32rpx;"></view>
      <!--二手乐器-->
      <instrument @initPage="initPage" v-if="query.types==2" :query="query" ref="instrument" :screenHeight="screenHeight" :excessHeight="excessHeight"></instrument>
      <!--交流圈-->
      <currentCircle @initPage="initPage" v-if="query.types==1" :query="query" ref="currentCircle" :screenHeight="screenHeight" :excessHeight="excessHeight"></currentCircle>
      <!--代加工-->
      <requestGoods @initPage="initPage" v-if="query.types==4" :screenHeight="screenHeight" :excessHeight="excessHeight" :query="query" ref="requestGoods2"></requestGoods>

    </view>
  </view>
</template>

<script>

import {
  institution_vipyqList, manufacturer_vipyqList, normalyqList, institution_vipLikeyqList
} from '@/const/index.js';
import instrument from '../../componets/instrument/index'
import currentCircle from '../../componets/currentCircle/index'

import requestGoods from '../../componets/requestGoods/index'
export default {
  components: {
    instrument,
    currentCircle,
    requestGoods
  },
  data() {
    return {
      statusBarHeight: uni.getStorageSync('statusBarHeight'),
      screenHeight: '',
      excessHeight: 176,
      actionStyle: {
        'font-size': '28rpx',
        'font-family': 'PingFang SC-Medium, PingFang SC',
        'font-weight': '500',
        'color': '#999999',
      },
      border: false,
      current: 0,
      keywords: '',
      list: [],
      // 必传参数 
      query: {
        types: '1',//帖子类型:1=交流圈,2=二手乐器,3=求货,4=代加工
        position: '5',//请求位置:1=首页,2=我的关注,3=搜索,4=他人主页,5=我的点赞,6=我的动态
        search: ''
      },
      showThat: false,
      showcontent: false
    }
  },
  onLoad() {
    const result = uni.getSystemInfoSync();
    let safeAreaBottom = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().safeArea.height;
    this.screenHeight = uni.getStorageSync('screenHeight') - safeAreaBottom - this.statusBarHeight;
    let that = this
    that.showThat = false
    that.$nextTick(() => {
      //机构 求货 //制造商 求货代加工
      if (uni.getStorageSync('userinfo').institution_vip != 1 && uni.getStorageSync('userinfo').manufacturer_vip != 1) {
        that.list = normalyqList
      } else if (uni.getStorageSync('userinfo').institution_vip == 1 && uni.getStorageSync('userinfo').manufacturer_vip != 1) {
        that.list = normalyqList
      } else if (uni.getStorageSync('userinfo').institution_vip != 1 && uni.getStorageSync('userinfo').manufacturer_vip == 1) {
        //拥有所有权限
        that.list = institution_vipLikeyqList
      } else if (uni.getStorageSync('userinfo').institution_vip == 1 && uni.getStorageSync('userinfo').manufacturer_vip == 1) {
        //拥有所有权限
        that.list = institution_vipLikeyqList
      }
      that.showThat = true
    })
  },
  onShow() {
    uni.$on("isSeach", (data) => {
      if (data.isSeachFlag == true) {
        this.$nextTick(() => {
          this.showcontent = false
          this.newSearch(data.isSeachFlag)
        })
      }
    });
  },
  methods: {
    initPage() {

      let that = this
      that.$nextTick(() => {
        this.newSearch()
      })
    },
    change(index) {
      this.current = index;
      this.query.types = this.list[index].value
      console.log('types' + this.query.types)
      this.newSearch()
    },
    goback() {
      uni.navigateBack()
    },
    onSearch(type) {
      if (type == 'clear') {
        this.query.search = ''
      };
      this.newSearch()
    },
    newSearch() {
      this.$nextTick(() => {
        let keyObj = ''
        if (this.query.types == 1) {
          keyObj = 'currentCircle'
        } else if (this.query.types == 2) {
          keyObj = 'instrument'
        } else if (this.query.types == 3) {
          keyObj = 'requestGoods'
        } else if (this.query.types == 4) {
          keyObj = 'requestGoods2'
        }
        this.$refs[keyObj].init();
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.trends {
  .searchBox {
    width: 750rpx;
    height: 88rpx;
    background: #ffffff;

    .search {
      width: 100%;
      height: 66rpx;
      background: #f5f5f5;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      display: flex;
      align-items: center;

      .prefix {
        width: 32rpx;
        height: 32rpx;
        margin: 0 16rpx 0 24rpx;
      }

      .input {
        width: 95%;
      }
    }
  }

  .instrumentTabs {
    height: 98rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    color: #999999;
    line-height: 33rpx;
    overflow: hidden;
  }
}
</style>